<template>
    <div>
        <h2>门店信息显示</h2>

        <div>
            门店名称：
            <input type="text" v-model="cc.shopName">
            服务范围：
            <select v-model="cc.serveName">
                <option value="">请选择</option>
                <option :value="item.Name" v-for="item in bb.list" :key="item.Id">{{ item.Name }}</option>
            </select>
            <input type="button" value="查询" class="btn btn-primary" @click="cha">
            <input type="button" value="批量删除" class="btn btn-danger" @click="DelALL">
            <input type="button" value="批量启用" class="btn btn-warning" @click="UpdALL(0)">
            <input type="button" value="批量禁用" class="btn btn-info" @click="UpdALL(1)">
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-info">
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>Id</td>
                    <td>门店</td>
                    <td>地址</td>
                    <td>门店logo</td>
                    <td>门店图片</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>营业时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in aa.list" :key="item.Id">
                    <td>
                        <input type="checkbox" :value="item.Id" v-model="ids">
                    </td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.Addr }}</td>
                    <td>
                        <img :src="item.Logo" height="100" width="100" alt="">
                    </td>
                    <td>
                        <img :src="item.Photo" height="100" width="100" alt="">
                    </td>
                    <td>{{ item.SeverName }}</td>
                    <td>{{ item.DName }}</td>
                    <td>{{ item.Phone.substring(0, 3) + '****' + item.Phone.substring(7) }}</td>
                    <td>{{ item.StartTime }}-{{ item.EndTime }}</td>
                    <td>{{item.State==0?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>总<b>{{ aa.ZongYe }}</b>数</span>
        <span>总<b>{{ aa.ZongTiao }}</b>条</span>
        <span>共<b>{{ cc.pageIndex }}/{{ aa.ZongYe }}</b>页</span>

        <input type="button" value="首页" class="btn btn-info" @click="goPage(1)">
        <input type="button" value="下一页" class="btn btn-info" @click="goPage(cc.pageIndex + 1)">
        <span v-for="item in aa.ZongYe" :key="item" @click="goPage(item)">{{ item }}</span>
        <input type="button" value="上一页" class="btn btn-info" @click="goPage(cc.pageIndex - 1)">
        <input type="button" value="尾页" class="btn btn-info" @click="goPage(aa.ZongYe)">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
import moment from 'moment';
onMounted(() => {
    getshow();
    getBang();
})

//------修改跳转----
const upd=(id:any)=>{
    router.push({
        path:'/shopUpd',
        query:{
            id:id
        }
    })
}

//-------批量修改-------
const UpdALL=(state:any)=>{
    if (ids.value.length == 0) {
        alert('请至少选择一项');
        return;
    }
    if (confirm('确认修改吗？')){
        axios({
            method:'put',
            url:'/api/Info/UpdStateALL',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res => {
                console.log(res);
                if(res.data>0){
                    alert('成功');
                    getshow();
                    checked.value=false;
                    ids.value=[];
                    return;
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//---------批量删除-----
const DelALL = () => {
    if (ids.value.length == 0) {
        alert('请至少选择一项');
        return;
    }
    if (confirm('确认删除吗？')) {
        axios({
            method: 'delete',
            url: '/api/Info/DelShopALL',
            params: {
                ids: ids.value.toString()
            }
        })
            .then(res => {
                console.log(res);
                if(res.data>0){
                    alert('成功');
                    getshow();
                    checked.value=false;
                    ids.value=[];
                    return;
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//--------全选全不选----------
let checked = ref(false);
let ids = ref([]);
const checkAll = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = aa.list.map((item: any) => {
            return item.Id;
        })
    }
    else {
        ids.value = [];
    }
}

//按钮
const goPage = (num: any) => {
    if (num < 1) {
        cc.pageIndex = 1;
        return;
    }
    if (num > aa.ZongYe) {
        cc.pageIndex = aa.ZongYe;
        return;
    }
    cc.pageIndex = num;
    getshow();
}

//------分页查询----
const cha = () => {
    cc.pageIndex = 1;
    getshow();
}

//---------下拉绑定--------
let bb: any = reactive({
    list: []
})
const getBang = () => {
    axios({
        method: 'get',
        url: '/api/Info/ShowSever'
    })
        .then(res => {
            console.log(res);
            bb.list = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//---------显示---------
let aa: any = reactive({
    ZongTiao: 0,
    ZongYe: 0,
    list: []
})
let cc: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopName: '',
    serveName: ''
})
const getshow = () => {
    axios({
        method: 'get',
        url: '/api/Info/ShowShop',
        params: cc
    })
        .then(res => {
            console.log(res);
            aa.ZongTiao = res.data.ZongTiao;
            aa.ZongYe = res.data.ZongYe;
            aa.list = res.data.list;
        })
        .catch(err => {
            console.log(err);
        })
}
</script>

<style scoped>
span {
    margin-right: 10px;
}

input[type="button"] {
    margin-right: 10px;
}

b {
    color: red;
}
</style>